<template>
	<view class="wrap">
		<!-- 背景图 -->
		<view class="bg">
			<image src="../../../static/uview/common/jisi/背景.png" style="width: 100%;height: 100%;"></image>
			<view class="dynamic-area1">
				<image src="../../../static/uview/common/jisi/1float.png" mode="widthFix" style="width: 16.6%;float:left;height: 100%;"></image>
				<image src="../../../static/uview/common/jisi/1float.png" mode="widthFix" style="width: 16.6%;float:left;height: 100%;"></image>
				<image src="../../../static/uview/common/jisi/1float.png" mode="widthFix" style="width: 16.6%;float:left;height: 100%;"></image>
				<image src="../../../static/uview/common/jisi/1float.png" mode="widthFix" style="width: 16.6%;float:left;height: 100%;"></image>
				<image src="../../../static/uview/common/jisi/1float.png" mode="widthFix" style="width: 16.6%;float:left;height: 100%;"></image>
				<image src="../../../static/uview/common/jisi/1float.png" mode="widthFix" style="width: 16.6%;float:left;height: 100%;"></image>
				<view style="clear: both;"></view>
			</view>
			<view class="dynamic-area2">
				<image src="../../../static/uview/common/jisi/2float.png" mode="widthFix" style="width: 16.6%;float:left;height: 100%;"></image>
				<image src="../../../static/uview/common/jisi/2float.png" mode="widthFix" style="width: 16.6%;float:left;height: 100%;"></image>
				<image src="../../../static/uview/common/jisi/2float.png" mode="widthFix" style="width: 16.6%;float:left;height: 100%;"></image>
				<image src="../../../static/uview/common/jisi/2float.png" mode="widthFix" style="width: 16.6%;float:left;height: 100%;"></image>
				<image src="../../../static/uview/common/jisi/2float.png" mode="widthFix" style="width: 16.6%;float:left;height: 100%;"></image>
				<image src="../../../static/uview/common/jisi/2float.png" mode="widthFix" style="width: 16.6%;float:left;height: 100%;"></image>
				<view style="clear: both;"></view>
			</view>
		</view>
		<!-- 墓位 -->
		<view class="mw">
			<image src="../../../static/uview/common/jisi/墓碑.png" mode="widthFix" style="width: 100%;height: 100%;"></image>
		</view>
		<!-- 人 -->
		<view class="person">
			<image :class="act=='1'?'imageTop act':'imageTop'" src="../../../static/uview/common/jisi/人.png" mode="widthFix" style="width: 100%;height: 100%;"></image>
			<image :class="act=='1'?'imageTop2 act':'imageTop2'" src="../../../static/uview/common/jisi/人.png" mode="widthFix" style="width: 100%;height: 100%;"></image>
			<image :class="act=='1'?'imageCenterTop act':'imageCenterTop'" src="../../../static/uview/common/jisi/人.png" mode="widthFix" style="width: 100%;height: 100%;"></image>
			<image :class="act=='1'?'imageCenterBottom act':'imageCenterBottom'" src="../../../static/uview/common/jisi/人.png" mode="widthFix" style="width: 100%;height: 100%;"></image>
			<image :class="act=='1'?'imageBottom act':'imageBottom'" src="../../../static/uview/common/jisi/人.png" mode="widthFix" style="width: 100%;height: 100%;"></image>
		</view>
		<!-- 鸟 -->
		<view class="bird">
			<image src="../../../static/uview/common/jisi/flybird.gif" mode="widthFix" style="width: 100%;"></image>
		</view>
		<!-- 选项组 -->
		<view class="items">
			<image src="../../../static/uview/common/jisi/xianhua.png" mode="widthFix"></image>
			<image src="../../../static/uview/common/jisi/jisi.png" mode="widthFix"></image>
			<image src="../../../static/uview/common/jisi/shangxiang.png" mode="widthFix"></image>
		</view>
		<!-- 按钮组 -->
		<view class="btns">
			<view type="default" size="mini" style="background-color: green;">缅怀英烈</view>
			<view type="default" size="mini" style="background-color: yellow;" @click="resetjg">祭拜亲人</view>
			<view type="default" size="mini" style="background-color: grey;">代我扫墓</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				act:'0'
			}
		},
		methods: {
			resetjg(){
				let that = this
				this.act = '1'
				setTimeout(function(){
					that.act = '0'
				},4010)
			}
		}
	}
</script>

<style scoped lang="less">
	.btns{
		position: absolute;
		bottom: 35upx;
		width: 100%;
		text-align: center;
		left: 0;
		z-index: 10;
		perspective: 60upx;
		view{
			display: inline-block;
			border: 2upx solid white;
			border-radius: 7upx;
			padding: 6upx 12upx;
			background-color: rgba(255,255,255,.7);
			transform: scale(1.3) rotateX(10deg);
			margin:28upx;
			-webkit-font-smoothing:antialiased;
		}
	}
	.items{
		position: absolute;
		left: 30upx;
		top: 33%;
		transform: translateY(-50%);
		z-index: 11;
		image{
			width: 98upx;
			display: block;
			margin-bottom: 30upx;
		}
	}
	.wrap{
		width: 100vw;
		height: 100vh;
		position: relative;
		overflow: hidden;
	}
	.wrap>view{
		position: absolute;
	}
	.bg{
		width: 100%;
		height: 100%;
		// background: url('../../../static/uview/common/jisi/背景.png') no-repeat;
		z-index: 1;
	}
	.mw{
		width: 80%;
		text-align: center;
		z-index: 4;
		top: 58%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	.bird{
		z-index: 3;
		width: 100%;
		top:30%;
		animation: zchange 8s linear infinite;
		
	}
	@keyframes zchange{
		0% {
			z-index: 3;
		}
		74%{
			z-index: 3;
		}
		75%{
			z-index: 6;
		}
		100% {
			z-index: 6;
		}
	}
	.person{
		z-index:7;
		width: 18%;
		bottom:26%;
		left: 50%;
		transform: translateX(-50%);
		perspective: 150upx;
		image{
			position: absolute;
		}
		.imageTop{
			clip-path:polygon(0% 0%,100% 0%,100% 16%,0% 16%);
			transform:translateY(-50%) rotateX(0);
		}
		.imageTop.act{
			-webkit-animation: ani1 2s ease-in-out infinite;
			-webkit-animation-direction:alternate;
		}
		@keyframes ani1{
			0%{
				transform:translateY(-50%) rotateX(0deg);
			}
			90%{
				transform:translateY(-50%) rotateX(23deg);
			}
			100%{
				transform:translateY(-50%) rotateX(23deg);
			}
		}
		.imageTop2{
			clip-path:polygon(0% 16%,100% 16%,100% 40%,0% 40%);
			transform:translateY(-50%) rotateX(0);
		}
		.imageTop2.act{
			-webkit-animation: ani4 2s ease-in-out infinite;
			-webkit-animation-direction:alternate;
		}
		@keyframes ani4{
			0%{
				transform:translateY(-50%) rotateX(0deg);
			}
			90%{
				transform:translateY(-50%) rotateX(20deg);
			}
			100%{
				transform:translateY(-50%) rotateX(20deg);
			}
		}
		.imageCenterTop{
			clip-path:polygon(0% 40%,100% 40%,100% 46%,0% 46%);
			transform:translateY(-50%) rotateX(0deg);
		}
		.imageCenterTop.act{
			-webkit-animation: ani2 2s ease-in-out infinite;
			-webkit-animation-direction:alternate;
		}
		@keyframes ani2{
			0%{
				transform:translateY(-50%) rotateX(0deg);
			}
			90%{
				transform:translateY(-50%) rotateX(15deg);
			}
			100%{
				transform:translateY(-50%) rotateX(15deg);
			}
		}
		.imageCenterBottom{
			clip-path:polygon(0% 46%,100% 46%,100% 50%,0% 50%);
			transform:translateY(-50%) rotateX(0);
		}
		.imageCenterBottom.act{
			-webkit-animation: ani3 2s ease-in-out infinite;
			-webkit-animation-direction:alternate;
		}
		@keyframes ani3{
			0%{
				transform:translateY(-50%) rotateX(0deg);
			}
			90%{
				transform:translateY(-50%) rotateX(5deg);
			}
			100%{
				transform:translateY(-50%) rotateX(5deg);
			}
		}
		.imageBottom{
			transform: translateY(-50%) rotateX(0);
			clip-path:polygon(0% 50%,100% 50%,100% 100%,0% 100%);
		}
		.imageBottom.act{
			transform: translateY(-50%) rotateX(0);
		}
	}
	
	.dynamic-area2 {
		position: absolute;
		width: 600%;
		height: 100%;
		top: 0;
		left: 0;
		// background: url('../../../static/uview/common/jisi/背景.png') repeat-x 0px 0px;
		background-size: cover;
		animation: posterDrop2 8000s linear infinite;
	}
	.dynamic-area1 {
		position: absolute;
		width: 600%;
		height: 100%;
		top: 0;
		left: 0;
		background-size: cover;
		animation: posterDrop1 6000s linear infinite;
	}
	@keyframes posterDrop2{
		0% {
		    // background-position: 0 0;
				transform: translateX(0);
		}
		100% {
		    // background-position: 30000% 0;
				transform: translateX(-3000%);
		}
	}
	@keyframes posterDrop1{
		0% {
		    // background-position: 0 0;
				transform: translateX(0);
		}
		
		100% {
		    // background-position: 4000% 0;
				transform: translateX(-1000%);
		}
	}
</style>
